<template>
  <div>
    <el-row
      type="flex"
      justify="center"
      v-if="setting.flag == 'circleProgress' && setting.data != ''"
    >
      <el-col class="ct circle-progress-div">
        <span v-for="(item, index) in setting.data" :key="index">
          <el-progress
            type="circle"
            :stroke-width="width"
            :percentage="item.rate"
            :color="changeColor"
          ></el-progress>
          <div>{{ item.name }}</div>
        </span>
      </el-col>
    </el-row>

    <el-row
      type="flex"
      v-for="(item, index) in setting.data"
      :key="index"
      class="line-progress-div"
    >
      <el-col v-if="setting.flag == 'lineProgress' && setting.data != ''">
        <span class="progress-name">{{ item.portName }}</span>
        <span class="line-progress" id="line-progress">
          <el-progress
            :stroke-width="width"
            :percentage="item.schedule"
            :color="changeColor"
          ></el-progress>
        </span>
        <span>
          <el-button
            type="primary"
            plain
            size="small"
            style="width: 130px"
            v-if="authority.canInternalTest"
            :disabled="item.internalTest === 1"
            @click="internalTesting(item)"
          >
            <span v-if="item.internalTest === 0">提交内部测试</span>
            <span v-if="item.internalTest === 1">已提交内部测试</span>
          </el-button>
          <el-button
            type="success"
            plain
            size="small"
            v-if="authority.canClientTest"
            :disabled="item.clientTest === 1"
            @click="userTesting(item)"
          >
            <span v-if="item.clientTest === 0">提交用户测试</span>
            <span v-else>提交用户测试</span>
          </el-button>
          <el-button
            :disabled="!authority.canOperateTaskPort"
            type="primary"
            size="small"
            icon="el-icon-edit"
            circle
            @click="modifyTask(item)"
          ></el-button>
          <el-button
            :disabled="!authority.canOperateTaskPort"
            type="danger"
            size="small"
            icon="el-icon-delete"
            circle
            @click="deleteTask(item)"
          ></el-button>
        </span>
      </el-col>
    </el-row>

    <el-row v-if="setting.flag == 'circleProgress' && setting.data == ''">
      <el-col class="noData">暂无数据</el-col>
    </el-row>
  </div>
</template>

<script>
import { deleteVerTaskPort, putsubmitTest } from "@/service/progressApi";

import bus from "@/components/bus";

export default {
  name: "projectProgress",
  props: ["setting", "authority", "circleProgress"],
  data() {
    return {
      width: 12,
      percentage: 0,
    };
  },
  methods: {
    changeColor(percentage) {
      if (percentage < 33) {
        return "#F56C6C";
      } else if (percentage < 66) {
        return "#E9B21C";
      } else {
        return "#00B98D";
      }
    },
    modifyTask(item) {
      this.$emit("modifyTask", "修改任务端", item);
    },
    deleteTask(item) {
      this.$confirm("确定要将该任务端删除吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          deleteVerTaskPort(item.id).then((res) => {
            if (res.code === 0) {
              this.$message.success("删除成功!");
              this.$emit("updateTaskPort");
            } else {
              this.$message.info(res.message);
            }
          });
        })
        .catch(() => {
          this.$message.info("已取消删除");
        });
    },
    //提交内部测试
    internalTesting(item) {
      if (item.internalTest === 0) {
        putsubmitTest(item.id, 0).then((res) => {
          if (res.code === 0) {
            this.$message.success("提交成功!");
            item.internalTest === 1;
            this.$emit("updateTaskPort");
          } else {
            this.$message.error(res.message);
          }
        });
      }
    },
    //提交用户测试
    userTesting(item) {
      if (item.clientTest === 0) {
        putsubmitTest(item.id, 1).then((res) => {
          if (res.code === 0) {
            item.clientTest === 1;
            this.$emit("updateTaskPort");
            this.$message.success("提交成功!");
          } else {
            this.$message.error(res.message);
          }
        });
      }
    },
  },
};
</script>

<style scoped>
.circle-progress-div {
  margin: 35px auto;
}

.circle-progress-div > span {
  display: inline-block;
}

.circle-progress-div > span:not(:last-child) {
  margin-right: 9%;
}

.circle-progress-div > span > div:last-child {
  margin-top: 15px;
}

.el-button.is-disabled {
  color: #909399;
  background: rgba(235, 235, 235, 1);
}

.line-progress-div {
  margin: -5px 0 25px 0;
}

.line-progress-div + div:last-child {
  margin-bottom: 0;
}

.line-progress {
  display: inline-block;
  width: 64%;
  margin-right: 15px;
}

.progress-name {
  display: inline-block;
  width: 6%;
  margin-right: 12px;
}

.operate-icon {
  margin-left: 10px;
  cursor: pointer;
}

.noData {
  text-align: center;
  color: #909399;
}
</style>